/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { BaseElement, element } from '../../base-ui/BaseElement';
import '../../base-ui/icon/LitIcon';
import '../../base-ui/chart/pagenation/pagination-box';
import { PaginationBox } from '../../base-ui/chart/pagenation/pagination-box';
import { PageNation } from '../../base-ui/chart/pagenation/PageNation';

@element('sp-div-table-temp')
export class SpDivTableTemp extends BaseElement {
  private tableOptionsEl: HTMLDivElement | undefined | null;
  private tablePanelEl: HTMLDivElement | undefined | null;
  private tableComponent: HTMLTableElement | undefined | null;
  private tableHead: HTMLElement | undefined | null;
  private tableBody: HTMLElement | undefined | null;
  private pageInfo: PaginationBox | undefined | null;
  private pageSize: number = 8;
  private pageNation: PageNation | undefined;
  private noDataEL: HTMLDivElement | undefined | null;

  static get observedAttributes() {
    return ['title'];
  }

  initElements(): void {
    this.tableOptionsEl = this.shadowRoot?.querySelector<HTMLDivElement>('.table-options');
    this.tablePanelEl = this.shadowRoot?.querySelector<HTMLDivElement>('.table-panel');
    this.tableComponent = this.shadowRoot?.querySelector<HTMLTableElement>('.table');
    this.tableHead = this.shadowRoot?.querySelector<HTMLElement>('.table-head');
    this.tableBody = this.shadowRoot?.querySelector<HTMLElement>('.table-body');
    this.pageInfo = this.shadowRoot?.querySelector<PaginationBox>('.pagination-info');
    this.noDataEL = this.shadowRoot?.querySelector<HTMLDivElement>('.no-data');
  }

  dataSource(data: any[]) {
    let that = this;
    let tableHeadData: any = [];
    if (data && data.length > 0) {
      this.noDataEL!.style.display = 'none';
      tableHeadData = [...Object.keys(data[0])];
      that.initTableHead(tableHeadData);
      let totalSlice = data.slice(0, 1);
      let otherSlice = data.slice(1, data.length);
      if (this.pageNation) {
        this.pageNation.clearClickEvent();
      }
      this.pageNation = new PageNation(this.pageInfo, {
        current: 1,
        total: data.length - 1,
        pageSize: this.pageSize,
        change(num: number) {
          let currentPageData = otherSlice.slice((num - 1) * that.pageSize, num * that.pageSize);
          if (currentPageData && currentPageData.length > 0) {
            that.initTableBody([...totalSlice, ...currentPageData]);
          }
        },
      });
    } else {
      this.noDataEL!.style.display = 'block';
    }
  }

  initTableHead(data: Array<string>) {
    this.tableHead!.innerHTML = '';
    let tr = document.createElement('tr');
    tr.className = 'tr head-tr';
    data.forEach((item: any) => {
      let th = document.createElement('th');
      th.className = 'th';
      th.textContent = item;
      tr.appendChild(th);
    });
    this.tableHead!.appendChild(tr);
    this.tableComponent?.appendChild(this.tableHead!);
  }

  initTableBody(data: any[]) {
    this.tableBody!.innerHTML = '';
    for (let index = 0; index < data.length; index++) {
      let tr = document.createElement('tr');
      tr.onmouseover = (event: MouseEvent) => {
        tr.style.backgroundColor = '#EEEEEE';
      };
      tr.onmouseout = (event: MouseEvent) => {
        tr.style.backgroundColor = '#FFFFFF';
        if (index === 0) {
          tr.style.backgroundColor = '#F9F9F9';
        }
      };
      if (index === 0) {
        tr.className = 'tr first-row';
      } else {
        tr.className = 'tr body-tr';
      }
      let currentDataList = Object.keys(data[index]);
      currentDataList.forEach((key: any, num: number) => {
        let td = document.createElement('td');
        td.className = 'td';
        td.innerText = data[index][key];
        tr.appendChild(td);
      });
      this.tableBody!.appendChild(tr);
    }
    this.tableComponent?.appendChild(this.tableBody!);
  }

  initHtml(): string {
    return `<style>
        :host {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            flex-direction: column;
            align-items: center;
        }
        .table-temp {
            background-color: #FFFFFF;
            padding-top: 1%;
            border-radius: 15px;
            max-height: 50vh;
            min-height:20vh;
        }
        .table-options {
            display: none;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: 25px;
            height: 5%;
        }
        .table-panel {
            height: 85%;
        }
        .pagination-info {
            display: flex;
            height: 10%;
        }
        .table{
            font-family: verdana,arial,sans-serif;
            font-size:12px;
            color:#333333;
            border-width: 1px;
            border-color: #999999;
            border-collapse: collapse;
            width: 100%;
        }
        .th{
            opacity: 0.8;
            font-family: Helvetica-Bold;
            font-size: 14px;
            color: #000000;
            text-align: center;
            font-weight: 700;
            background-color:#EAEAEA;
            margin-right: 5px;
            padding-right: 20px
        }
        .tr{
            height: 4.2vh;
            background-color:#FFFFFF;
        }
        .td{
            border-width: 0;
            padding: 8px 20px 8px 8px;
            border-style: solid;
            width: 20%;
        }
        .first-row{
            opacity: 0.8;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #000000;
            text-align: center;
            font-weight: 400;
            background-color: #F7F7F7;
        }
        .body-tr{
            opacity: 0.8;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #000000;
            text-align: center;
            font-weight: 400;
        }
            .no-data{
            line-height:20vh;
            text-align:center;
            width:100%;
        }
        </style>
        <div class="table-temp">
            <div class="no-data">暂无数据</div>
            <div class="table-options"></div>
            <div class="table-panel">
                <table class="table">
                    <thead class="table-head">
                    </thead>
                    <tbody class="table-body">
                    </tbody>
                </table>
            </div>
            <pagination-box class="pagination-info"></pagination-box>
        </div>
        `;
  }

  attributeChangedCallback(name: string, oldValue: string, newValue: string) {}
}
